<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb class="navigation">
      <el-breadcrumb-item :to="{ path: '/mapu' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体区域 -->
    <el-card class="notice">
      <h4>&nbsp;&nbsp;个人信息</h4>
      <!-- 获取用户信息 -->
      <img src="../../assets/Images/manager/user_pic.png" class="user_img" />
      <div class="form">
        <el-form :model="infoForm" ref="infoForm" class="open" style="margin-top:30px" label-width="auto">
          <el-form-item label="身份证:" prop="idNumber">
            <el-input v-model="infoForm.idNumber" disabled type="text" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="infoForm.username" disabled type="text" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="电话号:" prop="telephone">
            <el-input v-model="infoForm.telephone" disabled type="num" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label=" 性别:" prop="gender">
            <el-input v-model="infoForm.gender" disabled style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item style="width: 500px">
            <!-- 修改个人信息 -->
            <el-button type="primary" icon="el-icon-edit" @click="showEditDialogVisible()">修改信息
            </el-button>
            <!-- 修改密码 -->
            <el-button type="primary" icon="el-icon-edit" style="display: flex; float: right"
              @click="passwordDialogVisible = true">修改密码
            </el-button>
          </el-form-item>
        </el-form>
        <!-- 修改信息对话框 -->
        <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="30%" label-width="auto">
          <span>
            <el-form :model="editInfoForm" label-width="auto" ref="editFormRef" :rules="editFormRules">
              <el-form-item label="身份证:">
                <el-input v-model="editInfoForm.idNumber" disabled type="text" style="width: 75%"></el-input>
              </el-form-item>
              <el-form-item label="用户名:">
                <el-input v-model="editInfoForm.username" disabled type="text" style="width: 75%"></el-input>
              </el-form-item>
              <el-form-item label="电话号:" prop="telephone">
                <el-input v-model="editInfoForm.telephone" type="tel" style="width: 75%"></el-input>
              </el-form-item>
              <el-form-item label=" 性别:">
                <el-input v-model="editInfoForm.gender" disabled style="width:75%"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button :plain="true" @click="open('editFormRef')">取 消</el-button>
            <el-button type="primary" @click="editInfoFormInfo('editFormRef')">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 修改密码对话框 -->
        <el-dialog title="修改密码" :visible.sync="passwordDialogVisible" width="30%" label-width="auto">
          <span>
            <el-form :model="passwordForm" label-width="auto" ref="passwordFormRef" :rules="passwordRules">
              <el-form-item label="原始密码:" prop="oldPassword">
                <el-input v-model="passwordForm.oldPassword" type="password" style="width: 75%"></el-input>
              </el-form-item>
              <el-form-item label="新密码:" prop="newPassword">
                <el-input v-model="passwordForm.newPassword" type="password" style="width: 75%"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码:" prop="newPassword2">
                <el-input v-model="passwordForm.newPassword2" type="password" style="width: 75%"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button :plain="true" @click="passwordClose('passwordFormRef')">取 消</el-button>
            <el-button type="primary" @click="passwordFormInfo('passwordFormRef')">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Personal',
  data () {
    // 电话号码校验
    var validatePass3 = (editFormRule, value, callback) => {
      if (value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
        callback(new Error('手机号码不符合规范'))
      } else {
        callback()
      }
    }
    // 密码校验
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // 个人信息数据
      infoForm: {
        idNumber: '',
        username: '',
        telephone: '',
        gender: ''
      },
      editDialogVisible: false,
      passwordDialogVisible: false,
      // 查询到的用户信息对象
      editInfoForm: {
        idNumber: '',
        username: '',
        telephone: '',
        gender: ''
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        newPassword2: ''
      },
      // 编辑验证规则
      editFormRules: {
        telephone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: validatePass3, trigger: 'blur' }
        ]
      },
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { max: 12, min: 6, message: '长度为6到12位', trigger: 'blur' }
        ],
        newPassword2: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getMsg()
  },
  methods: {
    // 获取个人信息
    getMsg () {
      this.$axios.get('pogUser').then(res => {
        this.infoForm.idNumber = res.data.data.idNumber
        this.infoForm.username = res.data.data.username
        this.infoForm.telephone = res.data.data.telephone
        if (res.data.data.gender === 0) {
          this.infoForm.gender = '男'
        } else if (res.data.data.gender === 1) {
          this.infoForm.gender = '女'
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 控制修改信息对话框关闭消息发送
    open (editFormRef) {
      this.$message('已取消修改')
      this.$refs[editFormRef].resetFields()
      this.editDialogVisible = false
    },
    // 控制修改密码对话框关闭消息发送
    passwordClose (passwordFormRef) {
      this.$refs[passwordFormRef].resetFields()
      this.$message('已取消修改')
      this.passwordDialogVisible = false
    },
    // 监听修改信息对话框的关闭事件
    editDialogClose () {
      this.$refs.editFormRef.resetFields()
    },
    // 编辑修改信息
    showEditDialogVisible () {
      this.editDialogVisible = true
      // this.editInfoForm = data
      this.editInfoForm = this.infoForm
    },
    // 修改用户信息并提交
    editInfoFormInfo (editInfoForm) {
      this.$refs[editInfoForm].validate((valid) => {
        if (valid) {
          let param = {
            idNumber: this.editInfoForm.idNumber,
            username: this.editInfoForm.username,
            telephone: this.editInfoForm.telephone
          }
          this.$axios({
            url: 'pogUser',
            method: 'PUT',
            data: param
          }).then(res => {
            const info = res.data
            if (info.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success',
                offset: 70
              })
            } else if (info.code === 400) {
              this.$message({
                message: '修改失败',
                type: 'error',
                offset: 70
              })
            }
          })
            .catch((err) => {
              console.log(err)
            })
          // 关闭对话框
          this.editDialogVisible = false
        }
      })
    },
    // 修改密码并提交
    passwordFormInfo (passwordFormRef) {
      this.$refs[passwordFormRef].validate((valid) => {
        if (valid) {
          let param = {
            oldPassword: this.passwordForm.oldPassword,
            newPassword: this.passwordForm.newPassword
          }
          this.$axios({
            url: 'pogUser/password',
            method: 'PUT',
            data: param
          }).then(res => {
            const info = res.data
            if (info.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success',
                offset: 70
              })
            } else if (info.code === 400) {
              this.$message({
                message: '修改失败',
                type: 'error',
                offset: 70
              })
            }
          })
            .catch((err) => {
              console.log(err)
            })
          // 关闭对话框
          this.passwordDialogVisible = false
          this.$refs[passwordFormRef].resetFields()
        }
      })
    }
  }
}
</script>

<style scoped>
.navigation {
  padding: 10px;
}

/* 卡片 */
.notice {
  margin-bottom: 40px;
  border-radius: 15px;
  box-shadow: 15px 15px 10px -12px #4c61a0;
}

/* 个人信息表单 */
.open {
  margin-left: 30%;
  width: 400px;
}

h4 {
  padding-bottom: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #4c61a0;
}

/* 头像 */
.user_img {
  margin-left: 45%;
  margin-bottom: 20px;
  display: table-cell;
  width: 100px;
  height: 100px;
}

.toggle-button {
  background-color: #515f8a;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.form {
  margin-top: 30px;
}

.input_btn {
  margin-left: 40px;
}
</style>
